<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Submit Post | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Submit Post" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="By the end of this tutorial you should know how to prepare comments for Steem and then submit using the broadcast.comment function." />
<meta property="og:description" content="By the end of this tutorial you should know how to prepare comments for Steem and then submit using the broadcast.comment function." />
<link rel="canonical" href="submit_post.html" />
<meta property="og:url" content="submit_post.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"By the end of this tutorial you should know how to prepare comments for Steem and then submit using the broadcast.comment function.","mainEntityOfPage":{"@type":"WebPage","@id":"submit_post.html"},"@type":"BlogPosting","url":"submit_post.html","headline":"JS: Submit Post","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-submit-post" class="row tutorials-javascript-submit-post">
	<h3>
		<a id="tutorials-javascript-submit-post">
			JS: Submit Post
			
		</a>
	</h3>
	
		<span class="description"><p><em>By the end of this tutorial you should know how to prepare comments for Steem and then submit using the broadcast.comment function.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/10_submit_post">Submit Post</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial will show the method of properly formatting content followed by broadcasting the information to the steem blockchain using a <code class="highlighter-rouge">demo</code> account on the <code class="highlighter-rouge">testnet</code>.</p>

<h2 id="intro">Intro</h2>

<p>We are using the <code class="highlighter-rouge">client.broadcast.comment</code> function provided by <code class="highlighter-rouge">dsteem</code> which generates, signs, and broadcasts the transaction to the network. On the Steem platform, posts and comments are all internally stored as a <code class="highlighter-rouge">comment</code> object, differentiated by whether or not a <code class="highlighter-rouge">parent_author</code> exists. When there is no <code class="highlighter-rouge">parent_author</code>, then it’s a post, otherwise it’s a comment.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#app-setup"><strong>App setup</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to use the proper connection and network.</li>
  <li><a href="#fetch-content"><strong>Fetch Steem Post or Comment data</strong></a> Defining information variables with the <code class="highlighter-rouge">submitpost</code> function.</li>
  <li><a href="#format-broadcast"><strong>Format and Broadcast</strong></a> Formatting the comments and submitting to the blockchain.</li>
</ol>

<h4 id="1-app-setup">1. App setup<a name="app-setup"></a></h4>

<p>Below we have <code class="highlighter-rouge">dsteem</code> pointing to the test network with the proper chainId, addressPrefix, and endpoint. Because this tutorial is interactive, we will not publish test content to the main network. Instead, we’re using the testnet and a predefined account to demonstrate post publishing.
There is a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of this tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//connect to community testnet</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">STX</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="dl">'</span><span class="s1">79276aea5d4877d9a25892eaa01b0adf019d3e5cb12a97478df3298ccdd01673</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">//connect to server which is connected to the network/testnet</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://testnet.steem.vc</span><span class="dl">'</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="2-fetch-steem-post-or-comment-data">2. Fetch Steem Post or Comment data<a name="fetch-content"></a></h4>

<p>Next, we have the <code class="highlighter-rouge">submitPost</code> function which executes when the Submit post button is clicked.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//get private key</span>
<span class="kd">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postingKey</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span>
<span class="p">);</span>
<span class="c1">//get account name</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get title</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get body</span>
<span class="kd">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">body</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get tags and convert to array list</span>
<span class="kd">const</span> <span class="nx">tags</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">tags</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">taglist</span> <span class="o">=</span> <span class="nx">tags</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">);</span>
<span class="c1">//make simple json metadata including only tags</span>
<span class="kd">const</span> <span class="nx">json_metadata</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span> <span class="na">tags</span><span class="p">:</span> <span class="nx">taglist</span> <span class="p">});</span>
<span class="c1">//generate random permanent link for post</span>
<span class="kd">const</span> <span class="nx">permlink</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span>
    <span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">36</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
</code></pre></div></div>

<p>The <code class="highlighter-rouge">getElementById</code> function is used to obtain data from the HTML elements and assign them to constants. Tags are separated by spaces in this example and stored in an array list called <code class="highlighter-rouge">taglist</code> for later use. However, the structure of how to enter tags depends on your needs. Posts on the blockchain can hold additional information in the <code class="highlighter-rouge">json_metadata</code> field, such as the <code class="highlighter-rouge">tags</code> list which we have assigned. Posts must also have a unique permanent link scoped to each account. In this case we are just creating a random character string.</p>

<h4 id="3-format-and-broadcast">3. Format and Broadcast<a name="format-broadcast"></a></h4>

<p>The next step is to pass all of these elements in <strong>2.</strong> to the <code class="highlighter-rouge">client.broadcast.comment</code> function.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//broadcast post to the testnet</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span>
    <span class="p">.</span><span class="nx">comment</span><span class="p">(</span>
        <span class="p">{</span>
            <span class="na">author</span><span class="p">:</span> <span class="nx">account</span><span class="p">,</span>
            <span class="na">body</span><span class="p">:</span> <span class="nx">body</span><span class="p">,</span>
            <span class="na">json_metadata</span><span class="p">:</span> <span class="nx">json_metadata</span><span class="p">,</span>
            <span class="na">parent_author</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span>
            <span class="na">parent_permlink</span><span class="p">:</span> <span class="nx">taglist</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
            <span class="na">permlink</span><span class="p">:</span> <span class="nx">permlink</span><span class="p">,</span>
            <span class="na">title</span><span class="p">:</span> <span class="nx">title</span><span class="p">,</span>
        <span class="p">},</span>
        <span class="nx">privateKey</span>
    <span class="p">)</span>
    <span class="p">.</span><span class="nx">then</span><span class="p">(</span>
        <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">title</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">body</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">tags</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postLink</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span>
                <span class="dl">'</span><span class="s1">postLink</span><span class="dl">'</span>
            <span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`&lt;br/&gt;&lt;p&gt;Included in block: </span><span class="p">${</span>
                <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span>
            <span class="p">}</span><span class="s2">&lt;/p&gt;&lt;br/&gt;&lt;br/&gt;&lt;a href="http://condenser.steem.vc/</span><span class="p">${</span>
                <span class="nx">taglist</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span>
            <span class="p">}</span><span class="s2">/@</span><span class="p">${</span><span class="nx">account</span><span class="p">}</span><span class="s2">/</span><span class="p">${</span><span class="nx">permlink</span><span class="p">}</span><span class="s2">"&gt;Check post here&lt;/a&gt;`</span><span class="p">;</span>
        <span class="p">},</span>
        <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">);</span>
</code></pre></div></div>

<p>Note that the <code class="highlighter-rouge">parent_author</code> and <code class="highlighter-rouge">parent_permlink</code> fields are used for replies (also known as comments). In this example, since we are publishing a post instead of a comment/reply, we will have to leave <code class="highlighter-rouge">parent_author</code> as an empty string and assign the first tag to <code class="highlighter-rouge">parent_permlink</code>.</p>

<p>After the post has been broadcast to the network, we can simply set all the fields to empty strings and show the post link to check it from a condenser instance running on the selected testnet.</p>

<p>The <code class="highlighter-rouge">broadcast</code> operation has more to offer than just committing a post/comment to the blockchain. It provides a mulititude of options that can accompany this commit. The max payout and percent of steem dollars can be set. When authors don’t want all of the benifits from a post, they can set the payout factors to zero or beneficiaries can be set to receive part of the rewards. You can also set whether votes are allowed or not. The broadcast to the blockchain can be modified to meet the exact requirements of the author. More information on how to use the <code class="highlighter-rouge">broadcast</code> operation can be found on the Steem <a href="https://developers.steem.io/apidefinitions/#apidefinitions-broadcast-ops-comment">Devportal</a> with a list of the available broadcast options under the specific <a href="https://developers.steem.io/apidefinitions/#broadcast_ops_comment_options">Appbase API</a></p>

<h3 id="to-run-the-tutorial">To Run the tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/10_submit_post</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

